<template>
     
    <el-form :inline="true" :model="query" style="margin-bottom:10px;">
      <el-form-item label="状态">
        <el-select v-model="query.ro_status" @change="getPage(1)">
          <el-option label="全部" value=""></el-option>
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in ddo.dataStatus"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="编号">
        <el-input v-model="query.ro_id"></el-input>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="query.ro_name"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getPage(1)">查询</el-button>
        <template v-if="query.ro_status == '00'">
          <el-button type="primary" @click="openAdd">新增</el-button>
          <el-button type="primary" @click="execMultiDel">删除</el-button>
        </template>
      </el-form-item>
    </el-form>
  


    <el-table      
      :data="page.list"
      :stripe="true"
      :fit="true"
      :max-height="tableMaxHeight"      
      style="width: 100%;flex:auto;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="ro_id" label="编号" />
      <el-table-column prop="ro_name" label="名称" />
      <el-table-column prop="ro_remark" label="备注" />
      <el-table-column prop="ro_status" label="状态">
        <template #default="{ row }">
          <span
            :style="{
              color: ddo.dataStatusColorMap[row.ro_status],
              fontWeight: 'bold',
            }"
            >{{ ddo.text("dataStatus", row.ro_status) }}</span
          >
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="{ row }">
          <el-button
            v-if="row.ro_status == '00'"
            size="small"
            
            >编辑</el-button
          >
          <el-button
            v-if="row.ro_status == '00'"
            size="small"
            type="danger"
            
            >删除</el-button
          >
          <el-button
            v-if="row.ro_status == '00'"
            size="small"
            type="primary"
            
            >确定</el-button
          >
          <el-button
            v-if="row.ro_status == '22' || row.ro_status == '77'"
            size="small"
            type="success"
           
            >启用</el-button
          >
          <el-button
            v-if="row.ro_status == '55'"
            size="small"
            type="danger"
            
            >禁用</el-button
          >

          <el-button
            v-if="row.ro_status == '22' || row.ro_status == '55' || row.ro_status == '77'"
            size="small"
            type="primary"
            
            >权限</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      style="margin-top: 22px"
      layout="sizes,prev, pager, next, jumper, ->, total"
      :total="page.total"
      v-model:page-size="query.pageSize"
      v-model:current-page="query.pageNum"
      :page-sizes="[1, 3, 5, 10, 15, 20, 30, 100]"
      @current-change="getPage"
      @size-change="getPage(1)"
    />
  

  
  
</template>

<script setup >
import { ref, reactive,computed } from "vue";
import { tip, get,  put, del, ddo, elConfirm } from "@/common";

const tableMaxHeight = computed(()=>ddo.windowInnerHeight-325);

//多选处理
const multipleSelection = ref([]);
const handleSelectionChange = (selection) => {
  multipleSelection.value = selection;
};

//获取列表数据
const query = reactive({
  pageNum: 1,
  pageSize: 5,
  ro_id: "",
  ro_name: "",
  ro_remark:"",
  ro_status: "",
});
const page = ref({ total: 0 });

const getPage = (pageNo) => {
  query.pageNum = pageNo || 1;
  get("/security/role", query).then((result) => {
    page.value = result.data;
    query.pageNum = page.value.current;
    query.pageSize = page.value.pageSize;
  });
};

getPage(1);




</script>

<style scoped>

</style>